import { createStyles } from 'antd-style';

const useRedisWrapperStyles = createStyles(({ token, css }) => {
    return {
        redisWrapper: css`
        height: 100%;
        padding: 16px;
        .redis-content{
            flex: 1;
            height: 0;
        }
        .database-title{
            .database-btn{
                opacity: 0;
                transition: all 0.3s;
            }
            &:hover{
                .database-btn{
                    opacity: 1;
                }
            }
        }
        .ant-tree{
            overflow: auto;
            margin-top: 20px;
            flex: 1;
            .ant-tree-node-content-wrapper{
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            white-space: nowrap;
            flex: 1;
            .ant-tree-iconEle{
                min-width: 24px;
                width: unset;
                }
            }
            .ant-tree-treenode:not(.ant-tree-treenode-switcher-open.ant-tree-treenode-switcher-close){
                .ant-tree-switcher {
                    /* display: none; */
                }
            }
        }
        .ant-tree-treenode{
            width: 100%;
            .ant-tree-title{
                white-space: nowrap;
            }
            
        }
        .right-panel-btn-wrapper{
            padding-left: 15px;
            .ant-btn{
                width: 96px;
                margin-right: 10px;
            }
        }
        .left-panel-wrapper{
            display: flex;
            flex-direction: column;
            height: 100%;
            .ant-tree{
                padding-right: 15px;
            }
        }
        .left-panel-header{
            padding-right: 15px;
            flex-shrink: 0;
        }
        .right-panel-wrapper{
            border-left: 1px solid ${token.colorBorderSecondary};
            padding-left: 15px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        .right-panel-table{
            margin-top: 20px;
        }
        .panel-string-wrapper{
            flex: 1;
            height: 0;
            display: flex;
            flex-direction: column;
        }
        .panel-string-header-wrapper{
            margin-top: 20px;
        }
        .panel-string-content{
            margin-top: 10px;
            flex: 1;
            height: 0;
            overflow: auto;
            background-color: #002146;
        }
    `,
    };
});
export { useRedisWrapperStyles };